<template>
   <div class="detail">
       <div class="title">{{detail.title}}</div>
       <div class="summary">{{detail.summary}}</div>
       <div class="content">{{detail.content}}</div>
       <div class="create-time">{{detail.createTime}}</div>
   </div>
</template>

<script lang="ts">
    import  { Component, Vue } from 'vue-property-decorator'
    import apis from '@/plugins/xhr.ts'
    import moment from 'moment'

    @Component({
        name: 'detail',
    })
    export default class Detail extends Vue {
        private detail: any = {
            id: 1,
            title: '一只大苹果',
            img: 'https://dss0.baidu.com/73x1bjeh1BF3odCf/it/u=1982813398,3321026606&fm=85&s=1030C033171153D4D96DE8D70100C0A0',
            summary: '撒旦撒旦圣诞节撒角度看',
            content: 'qewqwewqewqewqdfdsf王企鹅无群二无群其味无穷若无群若无群权威汽车消费图1',
            createTime: '2019-10-10 10:20:20'
        };

        private  created () {
           this.reachDetail((this.$route as any).query.id)
        }
        private async reachDetail (id: string) {
            const res: any = await apis.getDetail({id})
            if (res.data.success) {
                this.detail = res.data.data;
                this.detail.createTime = moment(this.detail.createTime).format('YYYY-MM-DD HH:mm:ss');
            } else {
                this.$toast.fail(res.data.message)
            }
        }

    }
</script>

<style scoped>
    .detail {
        padding: 20px;
        text-align: left;
    }
    .detail .title {
        font-size: 25px;
        padding-bottom: 20px;
    }
    .detail .summary {
        padding: 20px;
        background-color: #dcdcdc;
    }
    .detail .content {
        padding: 20px;
        text-indent: 2em;
        line-height: 200%;
    }
    .detail .create-time {
        color: #9c9c9c;
        text-align: right;
    }

</style>
